<template>
  <view>
    <view class="goods-list-item">
      <van-card :desc="ordersInfo.coding" :title="ordersInfo.goodsName"
        :thumb="imgPrefixAddress + ordersInfo.goodsPreviews" custom-class="bgc">
        <view slot="num">
          共{{ordersInfo.number}}件 实付：{{ordersInfo.paymentAmountS}}
        </view>
      </van-card>
    </view>

    <!-- 滑动评星评价 -->
    <view class="rate">
      <text class="goods-rate">商品评价</text>
      <van-rate :value=" value " @change="onChange" color="#FFAA43" />
      <text class="very">非常满意</text>
    </view>
    <!-- 选择评价 -->
    <view class="choose-rate">
      <view v-for="(item,index) in pingjiaList" :key="index" @click="choosePingjia">
        {{item.name}}
      </view>

    </view>

    <!-- 文本域评价区 -->
    <view class="textarea-rate">
      <textarea value="" placeholder="从多角度评价你的使用体验" placeholder-style="font-size:14px" />
    </view>
    <!-- 拍买家秀 -->
    <view class="rate-photo">
      <uni-icons type="camera-filled" size="30"></uni-icons>
      <text>为宝贝拍买家秀</text>
    </view>
    <!-- 匿名评论 -->
    <view class="anonymous-comment">
      <radio value="" checked="true" color="black" />
      <text>匿名评论</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value: 5,
        ordersInfo: {},
        imgPrefixAddress: "https://bjlr-1316909348.cos.ap-chengdu.myqcloud.com",
        // 评价数据
        pingjiaList: [{
          name: '款式新颖'
        }, {
          name: '材质上乘'
        }, {
          name: '使用感舒适'
        }],
        // 评价index
        pingjiaIndex: 0,
      };
    },
    methods: {
      // 选择评价
      choosePingjia() {},
      onChange(e) {
        console.log(e);
      }
    },
    onLoad(options) {
      let orderInfo = JSON.parse(decodeURIComponent(options.orderInfo));
      this.ordersInfo = orderInfo
    }
  }
</script>

<style lang="scss">
  .anonymous-comment {
    padding: 0 15px;
    display: flex;
    margin-top: 20rpx;
    align-items: center;
  }

  .rate-photo {
    width: 312px;
    height: 90px;
    border: 1px dashed #D5DDE5;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text {
      color: #141414;
      font-size: 14px;
    }
  }

  .textarea-rate {
    width: 100%;
    height: 110px;
    padding: 0 15px;
    margin-top: 15px;
  }

  .choose-rate {
    display: flex;
    padding: 0 14px;
    margin-top: 20rpx;

    view {
      padding: 0 10rpx;
      height: 28px;
      line-height: 28px;
      font-size: 12px;
      color: #8F9CA9;
      text-align: center;
      border: 1px solid #8F9CA9;
      border-radius: 14px;
      margin-right: 20rpx;
    }
  }

  .goods-list-item {
    .bgc {
      background-color: #fff;
    }
  }

  .rate {
    .goods-rate {
      font-size: 14px;
      color: #141414;
    }

    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    line-height: 30px;

    .very {
      margin-left: 20px;
      font-size: 12px;
      color: #141414;
    }
  }
</style>